<!--
 * @Description: 
 * @Author: duan_shuangjun 丶
 * @Date: 2024-08-19 18:26:31
 * @LastEditTime: 2025-09-22 10:43:50
-->
<!--
 * @Descripttion:回款明细
-->
<template>
  <div>
    <div class="business-content-wrap">
      <!-- 左边盒子 -->
      <div class="left-box" :class="{ fullWidth: !selectCreditRepaymentOrder }">
        <div class="left-box-title">回款明细</div>
        <!-- 头部搜索栏 -->
        <div class="search-box-wrap">
          <!-- 查询时间 -->
          <div class="betweenTime-box">
            <el-date-picker
              class="date-picker"
              v-model="pageListQuery.betweenTime"
              type="datetimerange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD HH:mm:ss"
            >
            </el-date-picker>
          </div>
          <div style="display: flex; align-items: center">
            <!-- 支付方式 -->
            <div class="payMethod-box">
              <!-- <span class="payMethod-text">回款状态</span> -->
              <el-select
                v-model="pageListQuery.status"
                clearable
                placeholder="请选择回款状态"
                style="width: 180px"
              >
                <el-option
                  v-for="item in statusList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <!-- 输入框 -->
            <div class="search-input-box">
              <img class="search-icon" src="@/assets/images/home/search-icon.png" alt="" />
              <input
                class="input"
                v-model.trim="pageListQuery.search"
                type="text"
                placeholder="请输入/收银员/回款人/账户名称"
              />
            </div>
            <span class="search-btn" @click="onSearch">查询</span>
          </div>
        </div>
        <!-- 营业账单列表相关组件 -->
        <div
          class="table-wrap"
          :class="{
            fullWidth: !selectCreditRepaymentOrder
          }"
        >
          <OnAccountDetailTableList :table-data="tableData" :loading="tableLoading" />
        </div>
        <!-- 分页 -->
        <div class="table-total" v-show="pageListTotal > 0">
          <span>共{{ pageListTotal }}条</span>
          <div>
            <Pagination
              v-show="pageListTotal > 0"
              :total="pageListTotal"
              v-model:page="pageListQuery.page"
              v-model:limit="pageListQuery.limit"
              @pagination="getCreditRepaymentOrderList"
              :pageSizes="[15, 30, 45, 100]"
            />
          </div>
        </div>
        <!-- 数据汇总&&按钮组 -->
        <div class="data-summary-box">
          <div class="summary-text">
            <!-- <span v-if="pageListTotal > 0">共{{ pageListTotal }}条</span> -->
          </div>
          <div class="sumary-btn-group">
            <span class="print" @click="print(1)">重新打印</span>
            <span class="cancel" @click="handleAction(2)">返回</span>
          </div>
        </div>
      </div>
      <!-- 右边盒子 -->
      <div class="right-box">
        <OnAccountDetailCard />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useOrderStore } from '@/stores/order'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import OnAccountDetailCard from './components/OnAccountDetailCard.vue'
import OnAccountDetailTableList from './components/OnAccountDetailTableList.vue'
import Pagination from '@/components/Pagination/Index.vue'
import { dealAssignDataFunction, debounce } from '@/utils/toolsValidate'
import { creditRepaymentOrderList } from '@/api/statistics'
import { creditRepaymentOrderDetail } from '@/api/statistics'
import { printerReprint } from '@/api/common.ts'

const orderStore = useOrderStore()
const router = useRouter()

// 响应式数据
const tableData = ref([])
const pageListTotal = ref(0)
// 表格加载状态
const tableLoading = ref(false)

const pageListQuery = reactive({
  page: 1,
  limit: 15,
  status: '', // 回款状态(-1:全部 0:未回款 1:已回款 2:回款中)
  search: '', // 搜索收银人/回款人/账户名称
  betweenTime: '' // 时间范围
})

const statusList = ref([
  // { label: '全部', value: -1 },
  { label: '未回款', value: 0 },
  { label: '已回款', value: 1 },
  { label: '回款中', value: 2 }
])

// 计算属性 - 使用Pinia store
const selectCreditRepaymentOrder = computed(() => orderStore.getSelectCreditRepaymentOrder)

// 方法
const print = async () => {
  if (!selectCreditRepaymentOrder.value) {
    ElMessage.error('请选择回款明细')
    return
  }
  try {
    const res = await creditRepaymentOrderDetail({
      order_id: selectCreditRepaymentOrder.value.id
    })
    if (res.status === 200) {
      await printerReprint({
        ticket_id: res.data.detail.ticket_id
      })
      ElMessage.success('推送打印成功')
    }
  } catch (error) {
    console.error('打印失败:', error)
    ElMessage.error('打印失败')
  }
}

// 按钮执行的操作
const handleAction = index => {
  switch (index) {
    // 打印
    case 1:
      break
    // 返回
    case 2:
      router.go(-1)
      break
  }
}

// 搜索挂账订单列表
const onSearch = debounce(() => {
  pageListQuery.page = 1
  getCreditRepaymentOrderList()
  // 重置选中当前表格行的数据
  orderStore.updateSelectCreditRepaymentOrder(null)
}, 500)

// 获取挂账订单列表
const getCreditRepaymentOrderList = async () => {
  try {
    tableLoading.value = true
    const res = await creditRepaymentOrderList(pageListQuery)
    if (res.status === 200) {
      tableData.value = dealAssignDataFunction([], res?.data?.list?.data)
      pageListTotal.value = dealAssignDataFunction(0, res?.data?.list?.total)
    }
  } catch (error) {
    console.error('获取挂账订单列表失败:', error)
  } finally {
    tableLoading.value = false
  }
}

// 生命周期
onMounted(() => {
  // 重置选中当前表格行的数据
  orderStore.updateSelectCreditRepaymentOrder(null)
  getCreditRepaymentOrderList()
})
</script>

<style lang="scss" src="./modules/onAccountDetail.scss" scoped></style>
